// 类组件
// import React,{Component} from 'react';

// 函数组件
import React from 'react';
import styles from './uc-skeleton.module.css';
import propTypes from 'prop-types';

// 类组件
// export default class UcSkeleton extends Component{

//   static defaultProps = {
//     avatar:false,
//     paragraph:{
//       rows:3,
//       width:'100%'
//     },
//     loading:false
//   };
//   static propTypes = {
//     avatar:propTypes.bool,
//     loading:propTypes.bool,
//     paragraph: propTypes.shape({
//       rows: propTypes.number,
//       width: propTypes.oneOfType([
//         propTypes.number,
//         propTypes.string,
//         propTypes.arrayOf(propTypes.oneOfType([
//           propTypes.number,
//           propTypes.string
//         ]))
//       ])
//     })
//   };

//   parseWidth = (val) => {

//     //..处理

//     return val;

//   };

//   render(){

//     let {avatar, loading, paragraph:{rows,width},children} = this.props;

//     let skl = (
//       <div className={styles.skl}>
//         {
//           avatar && <div className={styles.avatar}>avatar</div>
//         }
//         {
//           new Array(rows).fill(0).map((item,index)=>(
//             <div
//               key={index}
//               className={styles.row}
//               style={{width:this.parseWidth(width,index)}}
//             >paragraph</div>
//           ))
//         }
//       </div>
//     );

//     return loading ? skl: children
//   }
// }

const UcSkeleton = props =>{
  const parseWidth = (val) => {

    //..处理

    return val;

  };
  let {avatar, loading, paragraph:{rows,width},children} = props;

  let skl = (
    <div className={styles.skl}>
      {
        avatar && <div className={styles.avatar}>avatar</div>
      }
      {
        new Array(rows).fill(0).map((item,index)=>(
          <div
            key={index}
            className={styles.row}
            style={{width:parseWidth(width,index)}}
          >paragraph</div>
        ))
      }
    </div>
  );

  return loading ? skl: children
}

UcSkeleton.defaultProps = {
  avatar:false,
  paragraph:{
    rows:3,
    width:'100%'
  },
  loading:false
};

UcSkeleton.propTypes = {
  avatar:propTypes.bool,
  loading:propTypes.bool,
  paragraph: propTypes.shape({
    rows: propTypes.number,
    width: propTypes.oneOfType([
      propTypes.number,
      propTypes.string,
      propTypes.arrayOf(propTypes.oneOfType([
        propTypes.number,
        propTypes.string
      ]))
    ])
  })
};

export default UcSkeleton;